<template>
    <div class="article-container" :class="{ 'dark-mode': isDarkMode }">
        <!-- 文章头部 -->
        <header class="article-header">
            <h1 class="title">{{ article.title }}</h1>
            <div class="meta">
                <div class="author">
                    <img :src="article.author.avatar" class="avatar" alt="作者头像">
                    <div>
                        <span class="name">{{ article.author.name }}</span>
                        <time class="date">{{ formatDate(article.publishDate) }}</time>
                    </div>
                </div>
                <div class="stats">
                    <span class="read-time">阅读时间 {{ article.readTime }}分钟</span>
                    <span class="word-count">{{ article.wordCount }}字</span>
                </div>
            </div>
            <div class="tags">
                <span v-for="tag in article.tags" :key="tag" class="tag">{{ tag }}</span>
            </div>
            <img :src="article.cover" class="cover" alt="文章封面">
        </header>

        <!-- 主体区域 -->
        <main class="article-body">
            <!-- 目录导航 -->
            <nav class="toc" v-if="headings.length">
                <h3>目录导航</h3>
                <ul>
                    <li v-for="heading in headings" :key="heading.id" :class="`toc-level-${heading.level}`">
                        <a :href="`#${heading.id}`">{{ heading.text }}</a>
                    </li>
                </ul>
            </nav>

            <!-- 文章内容 -->
            <article class="content" ref="contentRef" v-html="compiledContent" @click="handleImageClick"></article>

            <!-- 功能工具栏 -->
            <div class="toolbar">
                <button @click="toggleDarkMode" class="tool-btn">
                    <i :class="isDarkMode ? 'icon-sun' : 'icon-moon'"></i>
                </button>
                <button @click="scrollToTop" class="tool-btn">
                    <i class="icon-arrow-up"></i>
                </button>
            </div>
        </main>

        <!-- 相关推荐 -->
        <section class="related-articles" v-if="relatedArticles.length">
            <h3>延伸阅读</h3>
            <div class="article-grid">
                <article-card v-for="item in relatedArticles" :key="item.id" :article="item" />
            </div>
        </section>

        <!-- 评论区 -->
        <comment-section :comments="comments" @submit-comment="handleCommentSubmit" />
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
// import { marked } from 'marked'
// import hljs from 'highlight.js'
// import 'highlight.js/styles/atom-one-dark.css'
import { useScroll, useDebounceFn } from '@vueuse/core'
// import ArticleCard from './ArticleCard.vue'
// import CommentSection from './CommentSection.vue'

// 类型定义
interface Article {
    id: string
    title: string
    content: string
    cover: string
    author: {
        name: string
        avatar: string
    }
    publishDate: Date
    readTime: number
    wordCount: number
    tags: string[]
}

// 文章数据
const article = ref<Article>({
    id: '1',
    title: 'Vue3最佳实践与架构设计',
    content: '# 标题\n## 子标题\n正文内容...',
    cover: '/cover.jpg',
    author: {
        name: '前端大师',
        avatar: '/avatar.png'
    },
    publishDate: new Date(),
    readTime: 8,
    wordCount: 3500,
    tags: ['Vue3', '前端架构', 'TypeScript']
})

// 功能状态
const isDarkMode = ref(false)
const contentRef = ref<HTMLElement>()
const { y: scrollY } = useScroll(window)

// Markdown处理
const compiledContent = computed(() => {
    marked.setOptions({
        highlight: (code) => hljs.highlightAuto(code).value
    })
    return marked(article.value.content)
})

// 自动生成目录
const headings = ref<Array<{ id: string, text: string, level: number }>>([])
const updateHeadings = useDebounceFn(() => {
    if (!contentRef.value) return
    const elements = Array.from(contentRef.value.querySelectorAll('h1, h2, h3'))
    headings.value = elements.map(el => ({
        id: el.id,
        text: el.textContent || '',
        level: parseInt(el.tagName.substring(1))
    }))
}, 300)

// 图片点击处理
const handleImageClick = (e: MouseEvent) => {
    const target = e.target as HTMLElement
    if (target.tagName === 'IMG') {
        // 实现图片预览逻辑
    }
}

// 初始化
onMounted(() => {
    new MutationObserver(updateHeadings).observe(contentRef.value!, {
        childList: true,
        subtree: true
    })
})
</script>

<style scoped lang="scss">
.article-container {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1rem;
    transition: background 0.3s ease;

    &.dark-mode {
        background: #1a1a1a;
        color: #e0e0e0;
    }
}

.article-header {
    margin-bottom: 3rem;

    .title {
        font-size: 2.5rem;
        line-height: 1.3;
        margin-bottom: 1.5rem;
    }

    .meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;

        .author {
            display: flex;
            align-items: center;
            gap: 1rem;

            .avatar {
                width: 48px;
                height: 48px;
                border-radius: 50%;
            }
        }

        .stats {
            color: #666;
            font-size: 0.9rem;

            span+span {
                margin-left: 1rem;
            }
        }
    }

    .tags {
        margin-bottom: 1rem;

        .tag {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            background: #f0f0f0;
            border-radius: 1rem;
            margin-right: 0.5rem;
            font-size: 0.9rem;
        }
    }

    .cover {
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.article-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 2rem;

    .toc {
        position: sticky;
        top: 2rem;
        align-self: start;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 8px;
        max-height: 80vh;
        overflow-y: auto;

        li {
            margin: 0.5rem 0;
            padding-left: calc((var(--level) - 1) * 1rem);
            font-size: 0.9rem;
            line-height: 1.4;
        }
    }

    .content {
        line-height: 1.8;
        font-size: 1.1rem;

        :deep(h1) {
            font-size: 2rem;
        }

        :deep(h2) {
            font-size: 1.6rem;
        }

        :deep(h3) {
            font-size: 1.3rem;
        }

        :deep(img) {
            max-width: 100%;
            border-radius: 8px;
            cursor: zoom-in;
        }

        :deep(pre) {
            border-radius: 8px;
            padding: 1rem;
            overflow-x: auto;
        }
    }
}

.toolbar {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .tool-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;

        &:hover {
            transform: translateY(-2px);
        }
    }
}

@media (max-width: 768px) {
    .article-body {
        grid-template-columns: 1fr;

        .toc {
            display: none;
        }
    }

    .toolbar {
        right: 1rem;
        bottom: 1rem;
    }
}
</style>